<template>
  <!-- <el-dropdown @command="handleCommand"> -->
  <span class="avatar-dropdown">
    <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
    <!-- <img class="user-avatar" :src="avatar" alt="" /> -->
    <div class="user-name">
      {{ username }}
      <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
      <div class="off-button" @click="logout">
        <vab-icon
          :icon="['fas', 'power-off']"
          style="font-size: 0.2rem"
        ></vab-icon>
      </div>
    </div>
  </span>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { recordRoute } from '@/config'

  export default {
    name: 'VabAvatar',
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    methods: {
      handleCommand(command) {
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'personalCenter':
            this.personalCenter()
            break
          case 'github':
            window.open('https://github.com/chuzhixin/vue-admin-beautiful')
            break
          case 'gitee':
            window.open('https://gitee.com/chu1204505056/vue-admin-beautiful')
            break
          case 'pro':
            window.open(
              'https://vue-admin-beautiful.com/admin-pro/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci='
            )
            break
          case 'plus':
            window.open(
              'https://vue-admin-beautiful.com/admin-plus/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci='
            )
        }
      },
      personalCenter() {
        this.$router.push('/personalCenter/personalCenter')
      },
      changeVersion() {
        process.env.NODE_ENV === 'development' ? 'production' : 'development'
        // location.reload()
        console.log(process.env.NODE_ENV)
      },
      logout() {
        this.$baseConfirm(
          '您确定要退出' + this.$baseTitle + '吗?',
          null,
          async () => {
            await this.$store.dispatch('user/logout')
            if (recordRoute) {
              const fullPath = this.$route.fullPath
              this.$router.push(`/login?redirect=${fullPath}`)
            } else {
              this.$router.push('/login')
            }
          }
        )
      },
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    height: 50px;
    padding: 0;

    .user-avatar {
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 5px;
    }

    .user-name {
      position: relative;
      margin-left: 0.05rem;
      margin-left: 0.05rem;
      cursor: pointer;
      display: flex;
      line-height: 0.6rem;
      color: $base-color-white;

      .off-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 0.05rem;
        margin: auto 0 auto 0.2rem;
        background-color: rgb(33, 112, 212);

        svg {
          color: $base-color-white !important;
          margin-right: 0 !important;
        }
      }
    }
  }
</style>
